<template>
  <div >
    <el-container>
      <el-header class="headcontaniner">
        <el-button @click="$router.push({path: '/questions/new'})" type="success" class="addbtn" icon="el-icon-edit">新增试题</el-button>
      </el-header>
      <el-main class="maincontaniner">
      <!-- 题库筛选 -->
       <el-form ref="form" :model="form" inline label-position="left" label-width="68px">
          <el-form-item label="学科">
             <el-select  @focus="getSubjectList" v-model="form.subjectID" placeholder="请选择" @change="changeFn">
               <el-option v-for="item in subjectlist"
               :key="item.value"
               :label="item.label"
               :value="item.value"
               ></el-option>
             </el-select>
          </el-form-item>
          <el-form-item label="二级目录">
            <el-select v-model="form.twoLevelDirectory" placeholder="请选择">
              <el-option v-for="item in twoLevelDirectorylist"
              :key="item.value"
              :label="item.label"
              :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="标签">
            <el-select v-model="form.tags" placeholder="请选择">
              <el-option v-for="item in taglist"
              :key="item.value"
              :label="item.label"
              :value="item.id"></el-option>
        </el-select>
        </el-form-item>
        <el-form-item label="关键字" >
          <el-input  style="width:193px" v-model="form.keyword" placeholder="根据题干搜索"></el-input>
        </el-form-item>
        <el-form-item label="试题类型">
          <el-select v-model="form.questionType" placeholder="请选择">
            <el-option v-for="item in questionTypelist"
            :key="item.value"
            :label="item.label"
            :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="难度">
        <el-select v-model="form.difficulty" placeholder="请选择">
          <el-option v-for="item in difficultylist"
            :key="item.value"
            :label="item.label"
            :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="方向">
        <el-select v-model="form.direction" placeholder="请选择">
          <el-option v-for="item in directionlist"
            :key="item"
            :label="item"
            :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="录入人">
        <el-select @focus="getcreatorIDList" v-model="form.creatorID" placeholder="请选择">
          <el-option v-for="item in creatorIDlist"
            :key="item.id"
            :label="item.username"
            :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="题目备注">
        <el-input style="width:193px" v-model="form.remarks" ></el-input>
      </el-form-item>
      <el-form-item label="企业简称">
        <el-input style="width:193px" v-model="form.shortName" ></el-input>
      </el-form-item>
      <el-form-item label="城市">
        <el-select @change="gettwocitylist" style="width:96px" v-model="form.city" placeholder="请选择">
          <el-option v-for="item in onecitylist"
            :key="item.city"
            :label="item.city"
            :value="item.city"></el-option>
        </el-select>
        <el-select  style="width:96px" v-model="form.province" placeholder="请选择">
          <el-option v-for="item in twocitylist"
            :key="item"
            :label="item"
            :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="confirmbtn">
        <el-button @click="ressetFn">清除</el-button>
        <el-button type="primary" @click="searchFn">搜索</el-button>
      </el-form-item>

    </el-form>
      </el-main>

    </el-container>

  </div>
</template>

<script>

import { Quelist } from '@/api/hmmm/questions'
import { Subsimple } from '@/api/hmmm/subjects'
import { Dirsimple } from '@/api/hmmm/directorys'
import { Tagsimple } from '@/api/hmmm/tags'
import { Usersimple } from '@/api/base/users'
import { datas } from '@/api/hmmm/citys'
import { questionType, difficulty, direction } from '@/api/hmmm/constants'

export default {
  data () {
    return {
      form: {
        name: '',
        subjectID: '', // 学科
        twoLevelDirectory: '', // 二级目录
        tags: '', // 标签
        keyword: '', // 关键字
        questionType: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        creatorID: '', // 录入人
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        city: '',
        province: '',
        page: 1,
        pagesize: 5
      },
      subjectlist: [], // 学科简单列表
      taglist: [], // 标签列表
      twoLevelDirectorylist: [], // 二级学科列表
      questionTypelist: questionType, // 试题类型列表
      difficultylist: difficulty, // 难度列表
      directionlist: direction, // 方向列表
      creatorIDlist: [], // 方向列表
      onecitylist: datas, // 一级城市
      twocitylist: []// 二级城市
    }
  },
  methods: {
    // 获取学科列表
    async getSubjectList () {
      const res = await Subsimple()
      this.subjectlist = res.data
      console.log(res)
    },
    // 根据学科列表获取二级下拉框数据和标签名(下拉框的值改变就会触发change事件)
    async  changeFn () {
      // 首先对二级目录和标签进行清空
      this.form.twoLevelDirectory = ''
      this.form.tags = ''
      const data = {}
      data.subjectID = this.form.subjectID
      const res = await Dirsimple(data)
      const ret = await Tagsimple(data)
      this.twoLevelDirectorylist = res.data
      this.taglist = ret.data
    },
    // 获取方向列表
    async getcreatorIDList () {
      const res = await Usersimple()
      this.creatorIDlist = res.data
    },
    // 根据一级城市查找到对应的二级城市
    gettwocitylist () {
      // 当一级城市改变时，首先清空二级城市
      this.form.province = ''
      this.twocitylist = datas.find(item => item.city === this.form.city).area
    },
    // 重置表单
    ressetFn () {
      this.form = {
        name: '',
        subjectID: '', // 学科
        twoLevelDirectory: '', // 二级目录
        tags: '', // 标签
        keyword: '', // 关键字
        questionType: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        creatorID: '', // 录入人
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        city: '',
        province: '',
        page: 1,
        pagesize: 5
      }
      this.getInitview()
    },
    // 初始化表格
    async getInitview () {
      const res = await Quelist({
        page: 1,
        pagesize: 5
      })
      this.$emit('InitData', res)
    },
    // 根据条件查找，渲染表格
    async searchFn () {
      // 根据学科和关键字共同查找
      if (this.form.subjectID) {
        const res = await Quelist({
          page: 1,
          pagesize: 5,
          subjectID: this.form.subjectID,
          keyword: this.form.keyword
        })

        this.$emit('InitData', res)
      } else { // 仅根据关键字查找
        const res = await Quelist({
          page: 1,
          pagesize: 5,
          keyword: this.form.keyword
        })
        this.$emit('InitData', res)
      }
    }
  },
  created () {
    this.getInitview()
  }

}
</script>

<style lang="scss" scoped>
.headcontaniner{
  position: relative;
  .addbtn{
    position: absolute;
    right: 32px;
    top: 0;
  }
}
.maincontaniner{
  position: relative;
  .confirmbtn{
    position: absolute;
    right: 20px;
    bottom:20px
  }
}

</style>>
